<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" @click="name=0" :class="{active:name==0}">全部</span>
      <span class="item" @click="name=7" :class="{active:name==7}">华语</span>
      <span class="item" @click="name=96" :class="{active:name==96}">欧美</span>
      <span class="item" @click="name=8" :class="{active:name==8}">日本</span>
      <span class="item" @click="name=16" :class="{active:name==16}">韩国</span>
    </div>
    <el-table :data="songsList" row-key="id"  v-loading="loading" height="800px" size="small" :lazy="true">
      <el-table-column
      type="index"
      width="100">
    </el-table-column>
<!-- 图片 -->
    <el-table-column
      width="200">
      <template slot-scope="scope">
        <div class="img-wrap">
              <img :src="scope.row.album.picUrl" alt="" />
              <span class="iconfont icon-play" @click="playMusic(scope.row.id,scope.row.album.picurl)"></span>
            </div>
          </template>
    </el-table-column>
    <!-- 音乐标题 -->
      <el-table-column
      prop="name"
      label="音乐标题"
      >
    </el-table-column>
    <!-- 歌手名称 -->
    <el-table-column
      label="歌手"
      >
      <template slot-scope="scope">
        <span >{{ scope.row.artists[0].name }}</span>
      </template>
    </el-table-column>
      <!-- 专辑 -->
      <el-table-column
      prop="name"
      label="专辑"
      >
      <template slot-scope="scope">
        <span >{{ scope.row.album.name }}</span>
      </template>
    </el-table-column>
      <!-- 时长 -->
      <el-table-column
      prop="name"
      label="时长"
      >
      <template slot-scope="scope">
        <span >{{ scope.row.bMusic.playTime | dataFormat }}</span>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'songs',
  data() {
    return {
      songsList: [],
      name:0,
      loading: false
    }
  },
 created () {
 this.getSongsList()
  },
  watch : {
    name () {
      this.getSongsList()
    }
  },
  methods : {
      async getSongsList () {
        this.loading = true
        const {data: res, } = await this.$http.get(`https://autumnfish.cn/top/song`, {
          params: { type: this.name}
        })

        if(res.code===200) {
          this.songsList = res.data
          this.loading = false
        }
      },
      async playMusic (id) {
      const { data: res } = await this.$http.get('https://autumnfish.cn/song/url', {
        params: { id }
      })
      // console.log(res)
      this.$parent.musicUrl = res.data[0].url
    },
    playmv(id) {
      this.$router.push(`/mv?id=${id}`)
    }
  }
};
</script>

<style >
.td1{
  width: 100px;
}
.songItem{
  margin-bottom: 3px;
}
</style>
